
<template>
<div class='child'>
    <ul>
        <li>手机品牌：{{show.brand}}</li>
        <li>手机型号：{{show.type}}</li>
        <li>市场价格：{{show.price}}</li>
    </ul>
</div>
</template>

<script>

export default {
    name:'mychild',
    props:['phone'],
    data() {
       
        return {
            content:[
                {
                    brand:'华为',
                    type:'Mate20',
                    price:'3699'
                },
                {
                    brand:'苹果',
                    type:'iPhone7',
                    price:'2944'
                },
                {
                    brand:'三星',
                    type:'Galaxy',
                    price:'3299'
                },
                {
                    brand:'vivo',
                    type:'Z5x',
                    price:'1689'
                },
                {
                    brand:'oppo',
                    type:'Reno',
                    price:'2599'
                },
            ],
            show:{
                brand:'',
                type:'',
                price:''
            }
        };
    },
    watch:{
        phone(){
            if (this.$props.phone) {
                var found = false
                this.content.forEach((value, index) =>{
                    if (value.brand === this.$props.phone) {
                        found = value
                    }
                })
                this.show = found ? found : {brand:'',type:'',price:''}
            } else {
                return
            }
        }
    }
    
}
</script>
